<template>
  <div class="w2" style="height: 280px">
    <div class="flex-between">
      <span class="c-title">算力概况</span>
      <el-radio-group size="mini" v-model="isXc">
        <el-radio-button :label="true">信创</el-radio-button>
        <el-radio-button :label="false">非信创</el-radio-button>
      </el-radio-group>
    </div>
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "Physicalresource",

  data() {
    return {
      isXc: false,
      chartId: "hashpowerOverview",
      xData: ["浪潮云", "新华三云", "曙光云"],
      usedData: [128345, 118845, 148834],
      emptyData: [288345, 188345, 388345],
      xcList: [
        {
          key: "浪潮云",
          name: "浪潮云",
          value: 288345,
          GHz: 8338740,
          unit: "台",
        },
        {
          key: "新华三云",
          name: "新华三云",
          value: 288345,
          GHz: 8338740,
          unit: "台",
        },
        {
          key: "曙光云",
          name: "曙光云",
          value: 288345,
          GHz: 8338740,
          unit: "台",
        },
      ],
      excList: [
        {
          key: "浪潮云",
          name: "浪潮云",
          value: 188345,
          GHz: 8138740,
          unit: "台",
        },
        {
          key: "新华三云",
          name: "新华三云",
          value: 588345,
          GHz: 5338740,
          unit: "台",
        },
        {
          key: "曙光云",
          name: "曙光云",
          value: 388345,
          GHz: 3338740,
          unit: "台",
        },
      ],
    };
  },

  watch: {
    isXc(v) {
      console.log("isXc: ", v);
    },
  },

  mounted() {
    this.dataInit(this.list);
  },

  methods: {
    dataInit() {
      this.chartInit();
    },
    chartInit() {
      const { xData, usedData, emptyData } = this;
      const c = echarts.init(document.getElementById(this.chartId));
      c.setOption({
        color: ["#2e76ff", "#9addf9"],
        animationDuration: 5000,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter(d) {
            let n = 0;
            const t = [`<div>${d[0].name}</div>`];
            const tt = d.map((e) => {
              n += e.value;
              return `<div>${e.marker}${e.seriesName}: ${e.value} GHz</div>`;
            });

            return t.concat(tt.reverse(), `共计: ${n} GHz`).join("");
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            // data: xData.map(
            //   (name, i) => `${name}\n${usedData[i] + emptyData[i]}GHz`
            // ),
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "已使用",
            type: "bar",
            stack: "Ad",
            barMaxWidth: 40,
            data: usedData,
          },
          {
            name: "未使用",
            type: "bar",
            stack: "Ad",
            barMaxWidth: 40,
            data: emptyData,
            label: {
              show: true,
              position: "top",
              color: "#515a6e",
              formatter(d) {
                return `${d.value} GHz`;
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 600px;
  height: 200px;
}
</style>